<template>
	<div class="joyfood-login">
		<div class="joyfood-login-opr">
			<div class="head">
				<div class="inner-head">
					<el-button
						class="btn-back el-icon-back"
						type="text"
						v-show="type === 'registry'"
						@click="type = 'login'"
					></el-button>
					<span>登录</span>
				</div>
			</div>
			<div class="main">
				<el-form>
					<el-form-item label="用户名" label-width="80px">
						<el-input
							class="input-base"
							v-model="loginForm.userName"
						></el-input> </el-form-item
					><el-form-item label="密码" label-width="80px">
						<el-input
							class="input-base"
							v-model="loginForm.password"
						></el-input>
					</el-form-item>
				</el-form>
				<transition name="login-main">
					<el-form v-show="type === 'registry'">
						<el-form-item
							v-show="type === 'registry'"
							label="昵称"
							label-width="80px"
						>
							<el-input
								class="input-base"
								v-model="loginForm.nickName"
							></el-input>
						</el-form-item>
						<el-form-item
							v-show="type === 'registry'"
							label="手机号码"
							label-width="80px"
              style="margin-bottom:0px;"
						>
							<el-input class="input-base" v-model="loginForm.phone"></el-input>
						</el-form-item>
					</el-form>
				</transition>
			</div>
			<div class="footer">
				<span class="footer-btn-box">
					<el-button
						class="btn-base"
						v-show="type !== 'registry'"
						type="primary"
						>登录</el-button
					>
					<el-button class="btn-base" @click="handleRegistry" type="warning"
						>注册</el-button
					>
				</span>
			</div>
		</div>
	</div>
</template>

<script>
// const moduleName = 'login'
// import { mapActions } from 'vuex';
import definitions from "@/utils/textDefinition";
import { getNodeBeforeTarget } from "@/utils/uaeBpmn";
export default {
	name: "Login",
	data() {
		return {
			loginForm: {
				name: undefined,
				password: undefined,
				phone: undefined,
				nickName: undefined,
			},
			type: "login",
		};
	},
	methods: {
		handleRegistry() {
			if (this.type === "login") {
				this.type = "registry";
				return;
			}
			this.login();
		},
	},
	async created() {
		const res = await getNodeBeforeTarget("isme", definitions);
		console.log(res);
	},
};
</script>

<style lang="scss">
.joyfood-login {
	height: 100%;
	overflow: hidden;
	width: 100%;
	background-image: url("../../public/imgs/bgc-body.png");
	// background-image: linear-gradient(
	// 	#e6646485,
	// 	rgba(255, 166, 0, 0.616) 30%,
	// 	#9198e57e 60%,
	// 	rgba(0, 128, 128, 0.5) 90%
	// );
	margin: 0 auto;
	.joyfood-login-opr {
		border-radius: 10px;
		overflow: hidden;
		margin: 0 auto;
		width: 460px;
		height: auto;
		margin-top: calc(10%);
		background-color: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(2px);
		box-shadow: 0 0 10px 2px #fff;
		.head {
			background-color: rgba(255, 255, 255, 0.2);
			background-image: linear-gradient(
				to right,
				rgba(255, 166, 0, 0.6),
				rgba(255, 0, 0, 0.5)
			);
			backdrop-filter: blur(4px);
			height: 40px;
			overflow: hidden;
			.inner-head {
				margin: 0 auto;
				height: 32px;
				width: calc(100% - 8px);
				line-height: 32px;
				margin-top: 3px;
				.btn-back {
					float: right;
					position: relative;
					top: -2px;
				}
				.el-icon-back {
					color: #fff;
					font-size: 16px;
					border-radius: 50%;
					width: 20px;
					height: 20px;
					// border: solid 1px white;
				}
				> span {
					color: white;
					display: inline-block;
					padding: 0px 12px;
					font-size: 14px;
					float: left;
				}
			}
		}
		.login-main-enter {
			height: 0;
			width: 0;
			// transform: scaleY(0);
		}
		.login-main-enter-active {
			transition: all 0.4s ease;
		}
		.login-main-enter-to {
			width: 100%;
			height: 80px;
			// transform: scaleY(1);
		}
		.main {
			transition: all 1s ease;
      overflow: hidden;
			color: #fff;
			height: calc(100% - 100px);
			padding: 20px 0px 12px 0px;
			.el-form-item__label {
				color: #fff;
			}
		}
		.footer {
			overflow: hidden;
			height: 40px;
			padding-right: 40px;
			.footer-btn-box {
				float: right;
			}
		}
	}
}
</style>
